import React, { Component } from 'react'

import { getArtLists ,delArt } from '@api'
import { Card,Button,Table,Tag,Modal,message ,Tooltip  } from 'antd'
import { subText } from '@utils/filters'
import moment from 'moment'
import {FileExcelOutlined} from '@ant-design/icons'
import XLSX from 'xlsx'

export default class ArtList extends Component {
	constructor() {
		super();
		this.state = {
			exportData:[],
			artLists: [],
			loading:true,
			total:0,
			page:1,
			count:10,
			visible:false,
			delId:-1,
			columns: [
				{
					title: '标题',
					dataIndex: 'title',
					key: 'title',
				},
				{
					title: '描述',
					dataIndex: '',
					render: (text,row,index)=>{
						return (
							<Tooltip title={ text.desc }>
								<span>
									{ subText(text.desc,15) }
								</span>
							</Tooltip>
						)
					},
					key: 'desc',
				},
				{
					title: '作者',
					dataIndex: 'author',
					key: 'author',
				},
				{
					title: '阅读次数',
					render: (text,record,index)=>{
						return (
							<Tag color={ text.count>1500&&'red'||text.count<500&&'green' }>
								{ text.count }
							</Tag>
						)
					},
					key: 'count'
				},
				{
					title: '创建时间',
					render: (text,row,index)=>{
						return (
							<span>
								 {moment(text.createAt).format("YYYY/MM/DD")}
							</span>
						)
					},
					key: 'createAt'
				},
				{
					title:'操作',
					key:'action',
					render : (text,row,index)=>{
						return (
							<div> 
								<Button size="small" onClick = { ()=>{
									this.props.history.push(`/admin/artEdit/${text.id}`)
								} } style={{marginRight:10}}>编辑</Button>  
								<Button size="small" onClick={ ()=>{ 
									this.delArt(text.id) 
									} } danger>删除</Button>  
							</div>
						)
					}
				}
			]
		}
	}
  render() {
    return (
      <div className='artList'>
				<Modal
					title="删除文章"
					visible={this.state.visible}
					onOk={this.confirmDel}
					onCancel={this.handleCancel}
				>
					您确认删除吗?
				</Modal>
        <Card title={
					<>
						文章列表
						<Button size="small" onClick={ ()=>{ this.props.history.push('/admin/artAdd') } } type="primary">增加</Button>
					</>
				} 
					extra={ 
						<>
							
							<Button onClick={ this.exportData } icon={<FileExcelOutlined />}></Button>
						</>
					}>
						<Table 
							loading={ this.state.loading }
							dataSource={this.state.artLists} 
							columns={this.state.columns} 
							pagination = {{
								total:this.state.total,
								pageSize:10,
								onChange:(current,pageSize)=>{
									// 点击不同的页数,获取不同页数据
										console.log(current,pageSize)
										this.setState({
											page:current,
											count:pageSize
										},()=>{
											this.getArtLists();
										})
										
								}
							}}
							/>
							
				</Card>
      </div>
    )
  }
	componentDidMount(){
		this.getArtLists();
	}
	confirmDel=()=>{
		// 在这里删除
		// 发送ajax
		delArt(this.state.delId).then(res=>{
			if(res.data.code ==='0'){
				message.success(res.data.msg,1,()=>{
					this.props.history.go(0)
				});
				
			}
			this.setState({
				visible:false
			})
		})
	}
	delArt= (id)=>{
		// 点击删除按钮  弹窗,同时传递一个参数 为 删除 id
		this.setState({
			visible:true,
			delId:id
		})
		
	}
	handleCancel = ()=>{
		// 取消删除
	}
	getArtLists = ()=>{
		// 获取文章列表  分页处理
		getArtLists({page:this.state.page,count:this.state.count}).then(res=>{
			if(res.data.code === '0'){
				this.setState({
					artLists: res.data.data.lists,
					loading:false,
					total: res.data.data.total
				})
			}
		})
	}
	exportData = ()=>{
		// 处理数据
		// 表头的处理 [{}]
		const dataHeaders = ['序号','标题','描述','内容','作者','阅读次数','创建时间'];
		let exportData = [dataHeaders];
		let artLists = this.state.artLists;
		artLists.forEach(art=>{
			//console.log(Object.values(art))
			exportData.push(Object.values(art))
		})
		// // 导出为excel
		const ws = XLSX.utils.aoa_to_sheet(exportData);
		const wb = XLSX.utils.book_new();
		XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
				/* generate XLSX file and send to client */
		XLSX.writeFile(wb, "文章.xlsx")
	}
}

